<template>
  <div style="position: relative;">
    <div>
      <div class="ht-head-wrap">
        <div class="title-item"><router-link to="/ng-overall-view">全景农谷</router-link></div>
        <div class="title-item"><router-link to="/sx-famous">三品一标</router-link></div>
        <div class="title-item title-item-active"><router-link to="/sx-digital-greatCause">数字农业</router-link></div>
        <div class="title-item"><router-link to="/sx-technology">科技研发</router-link></div>
        <div class="title-item"><router-link to="/ng-remote-sensing">卫星遥感</router-link></div>
      </div>

      <div class="ht-content clear-float">
        <div class="content-left">
          <sx-left :data="data" :properties="properties" :links="['airHum', 'airTemp', 'light']" />
        </div>
        <div class="content-middle">
          <sx-middle @video-change='handleVideoChange' />
        </div>
        <div class="content-right">
          <sx-right :data="data" :properties="properties" :links="['soilHum', 'soilTemp', 'co2']" />
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  import SxLeft from './sx-left/sx-left.vue';
  import SxRight from './sx-right/sx-right.vue';
  import SxMiddle from './sx-middle/sx-middle.vue';
  import { fetchJxwyData, getFqxzData } from "@/network/tg-fake-data";

  // 图标综合配置
  const properties = {
    airHum: {
      name: '空气湿度',
      colors: ['#40D0A3', 'rgba(47,166,179,0.00)'],
      formatter: '{value}%',
    },
    airTemp: {
      name: '空气温度',
      colors: ['#FAD961', 'rgba(247,107,28,0.00)'],
      formatter: '{value}°',
    },
    soilHum: {
      name: '土壤湿度',
      colors: ['#B4EC51', 'rgba(66,147,33,0.00)'],
      formatter: '{value}%',
    },
    soilTemp: {
      name: '土壤温度',
      colors: ['#00DBDE', 'rgba(0,22,255,0.00)'],
      formatter: '{value}°',
    },
    co2: {
      name: 'CO2统计',
      colors: ['#C86DD7', 'rgba(48,35,174,0.00)'],
      formatter: '{value}',
    },
    light: {
      name: '光照度',
      colors: ['#B4EC51', '#429321'],
      formatter: '{value}lux',
    },
  };

  export default {
    name: 'SxDigitalGreatCause',
    components: {
      SxLeft,
      SxRight,
      SxMiddle
    },
    data() {
      return {
        data: {},
        properties,
      }
    },
    mounted() {
      // 获取数据
      this.initJxwyData();
    },
    methods: {
      handleVideoChange(val) {
        if (val == 'd5ff6633-9772-4fb5-81b0-3f16b262460f') {
          this.initFqxzData();
        } else if (val == 'e63cd954-f6cb-44e1-a218-0c41465abac7') {
          this.initJxwyData();
        }
      },
      initJxwyData() {
        fetchJxwyData().then(res => {
          this.data = Object.assign({},this.data,res);
        }).catch(e => this.$alert(e));
      },
      initFqxzData() {
        getFqxzData().then(res => {
          let _light = [];
          if(this.data.light && this.data.light.length > 0) {
            _light = this.data.light.map(item => parseInt(item) + Math.round(Math.random()*1000))
          }
          this.data = Object.assign({}, this.data, {light:_light,...res});
        });
      }
    }
  }
</script>

<style scoped lang="scss" type="text/scss">
  .content-left {
    // background-color: red;
    left: 30px;
  }
  .content-right {
    // background-color: yellow;
    right: 30px;
  }
</style>
